<template>
	<view class="page">
		<view class="container1">
			<view style="font-size: 28rpx;color: #2965EA;line-height: 40rpx;">*请将新密码输入两次并确认</view>

			<!-- 输入当前密码 -->
			<view class="input-group">
				<input type="password" placeholder="请输入当前密码" v-model="currentPassword" />
			</view>

			<!-- 输入新密码 -->
			<view class="input-group">
				<input type="password" placeholder="请输入新密码" v-model="newPassword" />
			</view>

			<!-- 确认新密码 -->
			<view class="input-group">
				<input type="password" placeholder="请再次确认新密码" v-model="confirmPassword" />
			</view>

			<!-- 提交按钮 -->
			<button @click="submit"
				style="font-weight: bold; font-size: 32rpx; color: #FFFFFF; width: 632rpx; height: 88rpx; background: #4170FF; border-radius: 44rpx;">
				修改密码
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPassword: '', // 当前密码
				newPassword: '', // 新密码
				confirmPassword: '', // 确认新密码
			};
		},
		methods: {
			// 提交表单
			submit() {
				const {
					currentPassword,
					newPassword,
					confirmPassword
				} = this;

				// 验证输入
				if (!currentPassword || !newPassword || !confirmPassword) {
					uni.showToast({
						title: '请填写所有字段',
						icon: 'none'
					});
					return;
				}

				// 检查新密码与确认密码是否一致
				if (newPassword !== confirmPassword) {
					uni.showToast({
						title: '新密码与确认密码不匹配',
						icon: 'none'
					});
					return;
				}

				// 发起请求修改密码
				uni.request({
					url: 'https://example.com/api/change-password', // 替换为你的 API 地址
					method: 'POST',
					data: {
						currentPassword,
						newPassword
					},
					success(res) {
						if (res.data.success) {
							uni.showToast({
								title: '修改成功',
								icon: 'success'
							});
							// 成功后返回或重定向
							uni.navigateBack();
						} else {
							uni.showToast({
								title: res.data.message || '修改失败',
								icon: 'none'
							});
						}
					},
					fail() {
						uni.showToast({
							title: '网络错误，请重试',
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>

<style scoped>
	.page {
		height: 100vh;
		background-color: #FFFFFF;
	}

	.container1 {
		margin-top: 30rpx;
		height: 600rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 0 60rpx;
	}

	.input-group {
		width: 630rpx;
		height: 100rpx;
		background: #F6F6F6;
		border-radius: 16rpx;
	}

	input {
		width: 100%;
		height: 100%;
		padding: 10px;
		box-sizing: border-box;
		background-color: #F6F6F6;
		border-radius: 4px;
	}

	button {
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		width: 632rpx;
		height: 88rpx;
		background: #4170FF;
		border-radius: 44rpx;
	}
</style>